import * as echarts from 'echarts'

//折线图配置
export const lineOption = {
  legend: {
    show: true,
    data: [] as any[],
  },

  tooltip: {
    show: true,
    trigger:'axis',
   
  },
  // tooltip: {
  //   show: true,
  //   trigger: 'axis',
  //   confine: true,
  //   axisPointer: {
  //     type: 'line',
  //     snap: true,
  //   },
  //   textStyle: {
  //     textShadowColor: 'transparent',
  //     textShadowBlur: 5,
  //   },
  // },
  grid: {
    left: '10%',
    right: '5%',
    top: '20%',
    bottom: '5%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisTick: {
      show: true,
      inside: true,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#707070',
      },
    },
    axisLabel: {
      type: 'category',
      data: [],
      rotate: 60,
      textStyle: {
        color: '#A8ADCF',
      },
    },
  },
  yAxis: {
    type: 'value',
    name: '',
    nameTextStyle: {
      color: '#A8ADCF',
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#707070',
      },
    },
    axisLabel: {
      textStyle: {
        color: '#A8ADCF',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(112, 112, 112, 0.2)',
      },
    },
  },
  dataset: {
    source: [] as any[],
  },
  series: [
    {
      name:'',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      itemStyle: {
        // 设置symbol的颜色
        normal: {
          color: '#251c5f',
          borderColor: '#35adfd',
          borderWidth: 1,
        },
      },
      label: {
        show: false,
        rotate: 90,
        position: 'top',
        fontSize: 10, //标签字体大小
        textStyle: {
          color: '#a4a9cc',
          fontSize: '10',
        },
      },
      lineStyle: {
        color: '#35ADFD',
        width: 1.5,
      },
      areaStyle: {
        show: true,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(24, 144, 255, 1)',
          },
          {
            offset: 0.6,
            color: 'rgba(24, 144, 255, 0.6)',
          },
          {
            offset: 1,
            color: 'rgba(24, 144, 255, 0.1)',
          },
        ]),
      },
    },
  ],
  color: ['#83bff6'],
}
// 柱状图配置
export const barOption = {
  legend: {
    show: true,
    data: [] as any[],
  },
  tooltip: {
    show: false,
    // trigger: 'axis',
    formatter: '{b} ({c})',
  },
  // tooltip: {
  //   show: true,
  //   trigger: 'axis',

  //   axisPointer: {
  //     type: 'line',
  //     snap: true,
  //   },
  //   textStyle: {
  //     textShadowColor: 'transparent',
  //     textShadowBlur: 5,
  //   },
  // },
  grid: {
    left: '10%',
    right: '5%',
    top: '20%',
    bottom: '4%',
    containLabel: true,
  },
  xAxis: {
   
    type: 'category',
    nameTextStyle: {
      color: '#A8ADCF',
      padding: [0, 0, -31, -60],
      verticalAlign: 'bottom',
      lineHeight: 10,
    },
    // boundaryGap: false,
    axisTick: {
      show: true,
      inside: true,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#707070',
      },
    },

    axisLabel: {
      textStyle: {
        color: '#A8ADCF',
      },
      formatter: function (params) {
        // console.log('formatter', params, params.length)
        var newParamsName = '' // 最终拼接成的字符串
        var paramsNameNumber = params.length // 实际标签的个数
        var provideNumber = 10 // 每行能显示的字的个数
        // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
        if (paramsNameNumber > provideNumber) {
          // ********重点在这里********
          newParamsName = params.substring(0, 10) + '..' // 最终拼成的字符串
        } else {
          // 将旧标签的值赋给新标签
          newParamsName = params
        }
        // 将最终的字符串返回
        return newParamsName
      },
    },
  },
  yAxis: {
    type: 'value',
    name: '',
    nameTextStyle: {
      color: '#A8ADCF',
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#707070',
      },
    },
    axisLabel: {
      textStyle: {
        color: '#A8ADCF',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(112, 112, 112, 0.2)',
      },
    },
  },
  dataset: {
    source: [] as any[],
  },
  series: [
    {
      type: 'bar',
      barWidth: 'auto',
      label: {
        show: true,
        position: 'top',
        fontSize: 10, //标签字体大小
        textStyle: {
          color: '#a4a9cc',
          fontSize: '10',
        },
      },
      itemStyle: {
        show: true,

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(37, 162, 144, 1)',
          },
          {
            offset: 0.6,
            color: 'rgba(37, 162, 144, 0.4)',
          },
          {
            offset: 1,
            color: 'rgba(37, 162, 144, 0.1)',
          },
        ]),
      },
    },
  ],
  color: ['#83bff6'],
}

// 饼图配置
export const pieOption = {
  color: ['#a62da8', '#595ede', '#e09f31', '#4ac1e2', '#9dff86'],
  tooltip: {
    trigger: 'item',
    show: true,
    // formatter: '{b} ({c})',
  },
  legend: {
    // type: "scroll",

    // bottom: 10,
    // top:'mi',
    // orient: 'rect',
    orient: 'horizontal',
    itemWidth: 6,
    itemHeight: 6,
    icon: 'circle', // 图例图形
    itemGap: 10,

    textStyle: {
      color: '#fff',
      fontSize: '.875rem',
      lineHeight: 10,
    },
  },
  dataset: {
    source: [] as any[],
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '60%'],
      center: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'outside',
        formatter: '{d}%',
      },
    },
  ],
}

// 雷达图

export const radarChart = {
  tooltip: {
    show: true,
    trigger: 'item',
  },
  color: ['#244ab7', '#244ab7'],
  legend: {
    icon: 'roundRect',
    // left: '47%',
    top: '90%',
    show: false,
    padding: [3, 5],
    // right: '50',
    y: '1',
    center: 0,
    itemWidth: 20,
    itemHeight: 10,
    itemGap: 26,
    z: 3,
    // orient: 'horizontal',
    data: ['电池', '女'],
    textStyle: {
      fontSize: 12,
      color: '#F1F7FF',
    },
  },
  radar: {
    center: ['50%', '50%'], // 外圆的位置
    radius: '55%',
    name: {
      textStyle: {
        color: '#fff',
        fontSize: 12,
        fontWeight: 400,
        fontFamily: 'PingFangSC-Regular,PingFang SC',
        // fontStyle: 'italic',
      },
    },
    // TODO:
    indicator: [] as any[],
    splitArea: {
      // 坐标轴在 grid 区域中的分隔区域，默认不显示。
      show: true,
      areaStyle: {
        // 分隔区域的样式设置。
        color: ['#30237c', '#30237c', '#30237c', '#30237c', '#30237c'], // 画布颜色 // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
      },
    },
    axisLine: {
      // 指向外圈文本的分隔线样式
      lineStyle: {
        color: 'rgba(255,255,255,0.2)',
      },
    },
    splitLine: {
      lineStyle: {
        type: 'solid',
        color: ['#1781BA', '#1781BA'], // 分隔线颜色
        width: 1, // 分隔线线宽
      },
    },
  },
  series: [
    {
      type: 'radar',
      symbolSize: 5,
      data: [
        {
          // TODO:
          value: [],
          name: '评估',
          areaStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(46,203,255, 0.14)', // 0% 处的颜色
                  },
                  {
                    offset: 0.15,
                    color: 'rgba(46,203,255, 0.14)', // 100% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: '#057FB3', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#078DC6', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          label: {
            // color: '#fff',
            // // 单个拐点文本的样式设置
            // normal: {
            //   show: true, // 单个拐点文本的样式设置。[ default: false ]
            //   position: 'top', // 标签的位置。[ default: top ]
            //   distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
            //   color: '#fff', // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
            //   fontSize: 12, // 文字的字体大小
            //   formatter: function (params) {
            //     return params.value
            //   },
            // },
          },
          itemStyle: {
            // 折线拐点标志的样式。
            normal: {
              // 普通状态时的样式
              lineStyle: {
                width: 1,
              },
              opacity: 0.3,
            },
            emphasis: {
              // 高亮时的样式
              lineStyle: {
                width: 5,
              },
              opacity: 0,
            },
          },
        },
      ],
    },
  ],
}
